<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>地址管理</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <Card style="margin-bottom: 10px;">
            <div class="normal-list-page-hd clearfix">
              <Input placeholder="请输入收货人姓名" class="mr-10" v-model="queryData.name" style="width: 150px" :clearable=true />
              <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire' >查询</Button>
            </div>
          </Card>
          <div class="mb-2">
            <Button-group>
              <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                删除
              </Button>
            </Button-group>
          </div>
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                  @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                  show-sizer></Page>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import MallAddressApi from '@/api/mall/MallAddress.js'
import moment from 'moment'
import { Message } from 'iview'

export default {
  name: 'mallAddress',
  data () {
    return {
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          /** 开始自动生成 */
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: 'id',
            key: 'id',
            align: 'center',
            minWidth: 40
          },
          {
            title: '微信id',
            key: 'openid',
            align: 'center',
            minWidth: 170
          },
          {
            title: '收货人',
            key: 'name',
            align: 'center',
            minWidth: 40
          },
          {
            title: '手机号',
            key: 'mobile',
            align: 'center',
            minWidth: 40
          },
          {
            title: '收货地址',
            key: 'detailedAddress',
            align: 'center',
            minWidth: 240,
            render: (h, params) => {
              return h('div', [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  },
                  domProps: {
                    title: params.row.detailedAddress
                  }
                }, params.row.detailedAddress)
              ])
            }
          },
          { title: '是否默认地址',
            key: 'isDefault',
            align: 'center',
            minWidth: 40,
            render: (h, params) => {
              if (params.row.isDefault === true) {
                return h('div', '是')
              } else if (params.row.isDefault === false) {
                return h('div', '否')
              }
            }
          },
          {
            title: '添加时间',
            key: 'createTime',
            align: 'center',
            minWidth: 120
          },
          {
            title: '修改时间',
            key: 'updateTime',
            align: 'center',
            minWidth: 120
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      MallAddressApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },
    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallAddressApi.del({
            ids: ids
          }).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach(element => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }

  },

  created () {
    this.getTableData()
  }
}
</script>
